<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body>
    <nav
      class="absolute top-0 left-1/2 w-full max-w-sm -translate-x-1/2 -translate-y-full rounded-sm bg-gray-100 p-4 transition-transform focus-within:translate-y-4"
      aria-label="Skip to"
    >
      <p class="text-xs font-semibold tracking-wide text-gray-700 uppercase">Skip to:</p>

      <div class="mt-1 flex flex-wrap gap-2">
        <a
          href="#mainNavigation"
          class="text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600"
        >
          Navigation
        </a>

        <a
          href="#mainContent"
          class="text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600"
        >
          Content
        </a>

        <a
          href="#mainFooter"
          class="text-sm font-medium text-blue-700 transition-colors hover:text-blue-600 active:text-blue-600"
        >
          Footer
        </a>
      </div>
    </nav>
  </body>
</html>
